<template>
  <!-- 维修列表项 组件 -->
  <view>
    <view class="itembox" @click="gotoDetail">
      <!-- 类型 -->
      <view class="leixing">
        <view class="title">类型：</view>
        <view>{{weixiu.type}}</view>
      </view>
      <!-- 具体描述 -->
      <view class="u-line-2 jtms-title">
        <view class="title">具体描述：</view>
        <view>{{weixiu.detail}}</view>
      </view>
      <!-- 接单btn -->
      <view class="btnjd" v-if="weixiu.status==='新任务'">接单</view>
      <!-- 进行中标签 -->
      <view class="flag-ing" v-if="weixiu.status==='已接单'">进行中</view>
      <!-- 已完成标签 -->
      <view class="flag-ing" v-if="weixiu.status==='已维修'">未评价</view>
      <view class="flag-finish" v-if="weixiu.status==='已评价'">已评价</view>
    </view>
  </view>
</template>

<script>
  export default {
    name:"my-weixiu-item",
    props: {
      // 维修单的信息对象
      weixiu: {
        type: Object,
        default: {},
      },
    
    },
    data() {
      return {
        
      };
    },
    methods:{
      gotoDetail(){
        uni.navigateTo({
          url: '/subpkg/weixiu-people-detail/weixiu-people-detail?id=' + this.weixiu.id
        })
      }
    }
  }
</script>

<style lang="scss">
.itembox {
    background-color: #ffffff;
    width: 100%;
    height: 200rpx;
    padding: 30rpx;
    margin-top: 30rpx;
    // margin-bottom: 30rpx;
  }

  .leixing {
    width: 300rpx;
    display: flex;
    justify-content: flex-start;
  }

  .title {
    font-weight: bold;
  }

  .jtms-title {
    width: 400rpx;
    margin-top: 20rpx;
  }

  .btnjd {
    background-color: #00aaff;
    font-size: 42rpx;
    // width: 80rpx;
    width: 90rpx;
    height: 50rpx;
    padding: 10rpx 50rpx;
    position: relative;
    top: -100rpx;
    left:480rpx;
  }
  .flag-ing {
    background-color: #ffff00;
    font-size: 42rpx;
    // width: 120rpx;
    width: 130rpx;
    height: 50rpx;
    padding: 10rpx 30rpx;
    position: relative;
    top: -100rpx;
    left:480rpx;
  }
  .flag-finish {
    background-color: #00aa00;
    color: #FFFFFF;
    font-size: 42rpx;
    // width: 120rpx;
    width: 130rpx;
    height: 50rpx;
    padding: 10rpx 30rpx;
    position: relative;
    top: -100rpx;
    left:480rpx;
  }
</style>
